import React from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import axios from 'axios'
import styles from './style.less'

@connect(
    state => state.auth
)
export default class Details extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            data: []
        }
    }

    componentDidMount() {
        axios.get('/api/ad').then( (response) => {
            console.log(response.data)
            this.setState({
                data: response.data
            })
        }).catch( (error) => {
            console.log(error)
        })
    }

    render() {
        return (
            <div className={styles.bg}>
                {this.props.isAuth ? null : <Redirect to='/login' />}
                <h3 className={styles.title}>这是路由跳转</h3>
                <div className={styles.mockAd}>
                    {
                        this.state.data.map((item, index) => {
                            return <div key={index} className="mockAdItem">
                                <a href={item.link}>
                                    <h3>{item.title}</h3>
                                    <img src={item.img} alt={item.title}/>
                                </a>
                            </div>
                        })
                    }
                </div>
            </div>
        )
    }
}